<template>
    <div class="edit-org-modal" ref="editAddModal">
        <a-modal 
            v-model:open="state.isShow"
            width="650px"
            wrapClassName="custom-modal"
            :bodyStyle="{height:'300px',overflowY:'overlay',overflowX:'hidden',paddingRight:'6px'}"
            :title="state.formState.id != undefined && state.formState.id > 0? '编辑字典值':'添加字典值'" 
            cancelText="取消"
            okText="确定"
            :getContainer="() => $refs.editAddModal"
            @ok="handleOk"
            @cancel="handleCancel"
        >
        <a-form
                ref="formRef"
                :model="state.formState"
                name="org-edit-form"
                autocomplete="off"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
            >
                <a-row>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="显示文本"
                            name="label"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '显示文本不能为空', trigger: 'blur' }]"
                        >
                            <a-input v-model:value="state.formState.label" placeholder="显示文本" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="字典值"
                            name="value"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '字典值不能为空', trigger: 'blur' }]"
                        >
                            <a-input v-model:value="state.formState.value" placeholder="字典值" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="编码"
                            name="code"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-input v-model:value="state.formState.code" placeholder="编码" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="排序"
                            name="orderNo"
                        >
                            <a-input-number v-model:value="state.formState.orderNo" placeholder="排序" class="w-full" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="状态"
                            name="status"
                        >
                            <a-radio-group v-model:value="state.formState.status">
                                <a-radio :value="1">启用</a-radio>
                                <a-radio :value="2">禁用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="拓展数据"
                            name="extData"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-textarea v-model:value="state.formState.extData" placeholder="请输入拓展数据" :rows="2" allow-clear />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { nextTick, reactive ,ref} from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { cloneDeep } from 'lodash';
import { showMsg } from '@/utils';
import { apiSysDictDataAddPost, apiSysDictDataUpdatePost } from '@/api/sys/sysDict';


const emits = defineEmits<{
    (e:"handleQuery"):void
}>()

const formRef = ref<FormInstance>()
const editAddModal = ref()
const state = reactive({
    isShow: false,
    formState: {

    }as any,
    orgData:[] as any[],
})

const handleOk =async () => {
    await formRef.value?.validate()
    const submitData = cloneDeep(state.formState)
    if(state.formState.id){
        await  apiSysDictDataUpdatePost(submitData)
    }else{
        await apiSysDictDataAddPost(submitData)
    }
    showMsg("操作成功",'success')
    emits('handleQuery')
    handleCancel()
}

const handleCancel = () => {
    state.isShow = false
    state.formState = {}
}

const handleOpen = (row:any) => {
    state.formState = JSON.parse(JSON.stringify(row))
    state.isShow = true
    formRef.value?.clearValidate()
}

defineExpose({
    handleOpen,
})
</script>

<style lang="scss" scoped>
    
</style>